<template>
	<view class="total">
		<!-- 美团 -->
		<view class="elm" v-show="isShow == 'true'">
			<view class="top">
				<image src="/static/img/other/img4.png" style="width: 100%;height: 546rpx;"></image>
				<view class="topm" :style="{'padding-top': height * 1   +  'px'}">
					<!--<view class="topmt" :style="{'padding-top': height * 1   +  'px'}"></view><-->
					<view class="pr tc topmt">
						<view class="img-box" @click="navgateBack">
							<image src="../../static/img/other/to-back.png" mode="heightFix"></image>
						</view>

						<text>美团外卖</text>
					</view>
					<view class="tab flex-between">
						<image src="../../static/img/other/icon7c.png" class="icon7" mode=""></image>
						<view class="tabm medium now" @click="change(true)">外卖</view>
						<view class="tabm medium" @click="change(false)">商超</view>
					</view>
				</view>
				<!--topm end-->
			</view>
			<!--top end-->
			<div class="box">
				<image src="../../static/img/other/img4b.png" style="width: 100%;" mode="widthFix"></image>
				<!-- <view class="wxpic"></view> -->
				<view class="golink" @click="tiao_meit">领红包点外卖</view>
			</div>
			<view class="pt30 pl20 lh22 f30 medium" style="color: #fff;padding-bottom: 20rpx;">注意事项:</view>
			<view class="" style="color: white;padding: 5px 5px 5px 20rpx;">
				1.必须使用本页的领券入口领券
			</view>
			<view class="" style="color: white;padding: 5px 5px 5px 20rpx;">
				2.美团领完券，下方出现的商家均可使用
			</view>
			<view class="" style="color: white;padding: 5px 5px 5px 20rpx;">
				3.美团绑定的手机号，需要与领券登录的手机号一致
			</view>
			<view class="" style="color: white;padding: 5px 5px 5px 20rpx;">
				4.无论美团新老用户，每个手机号每天可领一次，红包金额随机发放
			</view>
		</view>
		
		<!-- 商场超市 -->
		<view class="elm1" v-show="isShow == 'false'">
			<view class="top">
				<!-- <image src="../../static/img/other/img5.png" style="width: 100%;height: 525rpx;"></image> -->
				<image src="/static/img/other/img5.png" style="width: 100%;height: 546rpx;"></image>
				<view class="topm" :style="{'padding-top': height * 1   +  'px'}">
					<!--<view class="topmt" :style="{'padding-top': height * 1   +  'px'}"></view><-->
					<view class="pr tc topmt">
						<view class="img-box" @click="navgateBack">
							<image src="../../static/img/other/to-back.png" mode="heightFix"></image>
						</view>
						<text>美团外卖</text>
					</view>
					<view class="tab1 flex-between">
						<image src="../../static/img/other/icon7d.png" class="icon7b" mode=""></image>
						<view class="tabm medium" @click="change(true)">外卖</view>
						<view class="tabm medium now" @click="change(false)">商超</view>
					</view>
				</view>
				<!--topm end-->
			</view>
			<!--top end-->
			<div class="box">
				<image src="../../static/img/other/img5b.png" style="width: 100%;" mode="widthFix"></image>
				<!-- <view class="wxpic"></view> -->
				<view class="golink1" @click="to_sc">领红包点外卖</view>
			</div>
			<view class="pt30 pl20 lh22 f30 medium" style="color: #fff;padding-bottom: 20rpx;">注意事项:</view>
			<view class="" style="color: white;padding: 5px 5px 5px 20rpx;">
				1.必须使用本页的领券入口领券
			</view>
			<view class="" style="color: white;padding: 5px 5px 5px 20rpx;">
				2.美团领完券，下方出现的商家均可使用
			</view>
			<view class="" style="color: white;padding: 5px 5px 5px 20rpx;">
				3.美团绑定的手机号，需要与领券登录的手机号一致
			</view>
			<view class="" style="color: white;padding: 5px 5px 5px 20rpx;">
				4.无论美团新老用户，每个手机号每天可领一次，红包金额随机发放
			</view>
		</view>
	</view>

</template>

<script>
	export default {
		data() {
			return {
				height: 0,
				isShow: true
			};
		}, //data
		components: {
		}, // components
		onLoad(option) {
			// console.log(option)
			this.isShow = option.bol
			// console.log(this.isShow)
		},
		onShow() {
			this.$nextTick(() => {
				let menu = uni.getMenuButtonBoundingClientRect()
				this.height = menu.top
			})
		}, //onShow
		methods: {
			//返回
			navgateBack() {
				uni.navigateBack()
			},
			//美团商超
			tiao_meitsc() {
				uni.navigateTo({
					url: '/subpages/take/meitsc',
				})
			},
			//美团
			tiao_meit() {
				uni.navigateToMiniProgram({
					appId: 'wxde8ac0a21135c07d',
					path: '/index/pages/h5/h5?lch=cps:waimai:5:89f9827eb7b12545ff414e7f46f36f45:ceshi:2:120482&weburl=https%3A%2F%2Fdpurl.cn%2FP1vFoGAz&f_userId=1&f_token=1'
				})
			},
			//商超
			to_sc(){
				uni.navigateToMiniProgram({
					appId: 'wxde8ac0a21135c07d',
					path: '/index/pages/h5/h5?lch=cps:waimai:5:89f9827eb7b12545ff414e7f46f36f45:ceshi:4:120482&weburl=https%3A%2F%2Fdpurl.cn%2F0hv6OGzz&f_userId=1&f_token=1'
				})
			},
			change(bol){
				this.isShow = bol + ''
			}
		}, //methods
	}
</script>

<style>
	.elm {
		min-height: 100vh;
		overflow: hidden;
		background-color: #FDD630;
	}

	.top {
		position: relative;
	}

	.topm {
		width: 100vw;
		position: fixed;
		left: 0;
		top: 0;
		z-index: 1000;
		overflow: hidden;
	}

	.topmt {
		position: relative;
		text-align: center;
		font-size: 34rpx;
		padding-bottom: 24rpx;
		padding-left: 24rpx;
	}

	.topmt text {
		color: #fff;
		line-height: 58rpx;
	}

	.topmta {
		position: absolute;
		left: 0;
		top: 0;
		width: 100%;
		background-color: #00A4E9;
		height: 58rpx;
	}

	.img-box {
		padding-right: 20rpx;
		position: absolute;
		left: 0;
		top: 9rpx;
	}

	.img-box image {
		width: 40rpx;
		height: 40rpx;
	}

	.tab {
		width: 370rpx;
		height: 50rpx;
		background: rgba(228, 186, 56, 0.5);
		border-radius: 10rpx;
		margin: 0 auto;
		position: relative;
	}

	.tabm {
		width: 50%;
		text-align: center;
		color: #FDEDBD;
		font-size: 26rpx;
		line-height: 50rpx;
		position: relative;
		z-index: 2;
	}

	.tabm.now {
		color: #fff;
	}

	.icon7 {
		position: absolute;
		left: 0;
		top: 0;
		height: 50rpx;
		width: 193rpx;
		z-index: 1;
	}

	.box {
		margin: -72rpx 20rpx 0;
		position: relative;
		z-index: 10;
	}

	.golink {
		width: 538rpx;
		height: 86rpx;
		border-radius: 43rpx;
		position: absolute;
		left: 50%;
		margin-left: -269rpx;
		bottom: 100rpx;
		background: linear-gradient(0deg, #FACC22 0%, #F88000 100%);
		text-align: center;
		line-height: 86rpx;
		color: #fff;
		font-size: 30rpx;
	}

	.wxpic {
		width: 260rpx;
		height: 260rpx;
		position: absolute;
		left: 50%;
		margin-left: -130rpx;
		bottom: 168rpx;
		background: #757575;
	}
	
	
	
	/* 商场 */
	.elm1 {
		min-height: 100vh;
		overflow: hidden;
		background: linear-gradient(-42deg, #33B866 0%, #B2F156 100%);
	}
	
	.top {
		position: relative;
	}
	
	.topm {
		width: 100vw;
		position: fixed;
		left: 0;
		top: 0;
		z-index: 1000;
		overflow: hidden;
	}
	
	.topmt {
		position: relative;
		text-align: center;
		font-size: 34rpx;
		padding-bottom: 24rpx;
		padding-left: 24rpx;
	}
	
	.topmt text {
		color: #fff;
		line-height: 58rpx;
	}
	
	.topmta {
		position: absolute;
		left: 0;
		top: 0;
		width: 100%;
		background-color: #00A4E9;
		height: 58rpx;
	}
	
	.img-box {
		padding-right: 20rpx;
		position: absolute;
		left: 24rpx;
		top: 9rpx;
	}
	
	.img-box image {
		width: 40rpx;
		height: 40rpx;
	}
	
	.tab1 {
		width: 370rpx;
		height: 50rpx;
		background: rgba(111, 206, 110, 0.5);
		border-radius: 10rpx;
		margin: 0 auto;
		position: relative;
	}
	
	.tabm {
		width: 50%;
		text-align: center;
		color: #CDF4CD;
		font-size: 26rpx;
		line-height: 50rpx;
		position: relative;
		z-index: 2;
	}
	
	.tabm.now {
		color: #fff;
	}
	
	.icon7b {
		position: absolute;
		right: 0;
		top: 0;
		height: 50rpx;
		width: 193rpx;
		z-index: 1;
	}
	
	.box {
		margin: -49rpx 20rpx 0;
		position: relative;
		z-index: 10;
	}
	
	.golink1 {
		width: 538rpx;
		height: 86rpx;
		border-radius: 43rpx;
		position: absolute;
		left: 50%;
		margin-left: -269rpx;
		bottom: 95rpx;
		background: linear-gradient(0deg, #7EE577 0%, #54B85A 100%);
		text-align: center;
		line-height: 86rpx;
		color: #fff;
		font-size: 30rpx;
	}
	
	.wxpic {
		width: 260rpx;
		height: 260rpx;
		position: absolute;
		left: 50%;
		margin-left: -130rpx;
		bottom: 168rpx;
		background: #757575;
	}
</style>
